<div id="loginDiv" class="login_wrapper" xmlns:v-model="http://www.w3.org/1999/xhtml">
	<div class="animate form login_form">
		<section class="login_content">
			<form action="javascript:void(0);">
				<h1>Login Form</h1>
				<div>
					<input type="text" class="form-control" placeholder="Username"
						   required="" v-model:value="user.userName" />
				</div>
				<div>
					<input type="password" class="form-control" placeholder="Password"
						   required="" v-model:value="user.password" />
				</div>
				<div>
					<input class="form-control input-val" type="text" v-model:value="inputNum"
						   placeholder="请输入验证码（不区分大小写）"
						   style="float:left; width:65%; margin-bottom: 0px;" />
					<canvas @click="draw(showNum)" id="canvas" width="100" height="36" ></canvas>
				</div>
				<div style="text-align:left; margin-top: 5px; margin-left: 3px;">
					<input type="checkbox" value="rememberMe" lay-filter="filter"
						   v-model:value="user.rememberMe" style="float: left;"
						   lay-skin="primary" title="30天内自动登录" >30天内自动登录
				</div>
				<div>
					<a class="btn btn-default submit" href="javascript:void(0);"
					   @click="login()">Log in</a>
					<a class="reset_pass" href="javascript:void(0);">Lost your password?</a>
				</div>

				<div class="clearfix"></div>

				<div class="separator">
					<p class="change_link">
						New to site? <a href="/register" class="to_register"> Create Account </a>
					</p>

					<div class="clearfix"></div>
					<br />

					<div>
						<h1>
							<i class="fa fa-paw"></i> Spring Boot
						</h1>
						<p>©2016 All Rights Reserved. Spring Boot, use a Bootstrap 3 template.</p>
					</div>
				</div>
			</form>
		</section>
	</div>
</div>
<script type="text/javascript">
	var loginVue = new Vue({
		el:"#loginDiv",
		data:{
			showNum: [],
			inputNum: "",
			user: {
				userName: "",
				password: "",
				rememberMe: false,
			}
		},
		methods: {
			draw: function (showNum) {
				var canvas_width=$('#canvas').width();
				var canvas_height=$('#canvas').height();
				var canvas = document.getElementById("canvas");//获取到canvas的对象，演员
				var context = canvas.getContext("2d");//获取到canvas画图的环境，演员表演的舞台
				canvas.width = canvas_width;
				canvas.height = canvas_height;
				var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
				var aCode = sCode.split(",");
				var aLength = aCode.length;//获取到数组的长度

				for (var i = 0; i <= 3; i++) {
					var j = Math.floor(Math.random() * aLength);//获取到随机的索引值
					var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
					var txt = aCode[j];//得到随机的一个内容
					showNum[i] = txt.toLowerCase();
					var x = 10 + i * 20;//文字在canvas上的x坐标
					var y = 20 + Math.random() * 8;//文字在canvas上的y坐标
					context.font = "bold 23px 微软雅黑";

					context.translate(x, y);
					context.rotate(deg);

					context.fillStyle = this.randomColor();
					context.fillText(txt, 0, 0);

					context.rotate(-deg);
					context.translate(-x, -y);
				}
				for (var i = 0; i <= 5; i++) { //验证码上显示线条
					context.strokeStyle = this.randomColor();
					context.beginPath();
					context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
					context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
					context.stroke();
				}
				for (var i = 0; i <= 30; i++) { //验证码上显示小点
					context.strokeStyle = this.randomColor();
					context.beginPath();
					var x = Math.random() * canvas_width;
					var y = Math.random() * canvas_height;
					context.moveTo(x, y);
					context.lineTo(x + 1, y + 1);
					context.stroke();
				}
			},
			randomColor: function () {
				var r = Math.floor(Math.random() * 256);
				var g = Math.floor(Math.random() * 256);
				var b = Math.floor(Math.random() * 256);
				return "rgb(" + r + "," + g + "," + b + ")";
			},
			login: function () {
				/*if (this.inputNum == "") {
					layer.msg("Please input validation code.", {icon: 0});
					return;
				} else if (this.inputNum != this.showNum.join("")) {
					layer.msg("The validation code is error.", {icon: 0});
					return;
				}*/

				var self = this;
				console.log(self.user);
				$.ajax({
					url : "/api/login",
					type : "post",
					contentType: "application/json",
					data : JSON.stringify(self.user),
					success : function (rs) {
						if (rs.status == 200) {
							window.location.href = "/common/dashboard";
						} else {
							layer.msg(rs.message, {icon: 0});
						}
					},
					error : function (rs) {
						layer.msg(rs.responseText, {icon: 0});
					}
				});
			}
		},
		mounted: function () {
			this.draw(this.showNum);
		}
	});
</script>